<template>
  <div class='cameraDistribution'>
    <!--    地图 B-->
    <Bmap ref='baseMap' v-on:apt="accept"></Bmap>
    <!--    地图 E-->
    <!--    地图弹窗 B-->
    <div class='pop_up' v-show="iSplan==1">
      <!--新增tab-->
      <div class="newtab">
        <span @click="gorl">实时相机</span>
        <span>普通相机</span>
      </div>
      <!--新增tab-->
      <!--      搜索 B-->
      <div style="padding: 0.2rem .2rem 0 .2rem;">
       <!-- <el-input placeholder="搜索相机卡编号、网格编号" v-model="message1" class="input-with-select">
          <el-button slot="append" @click="search" icon="el-icon-search"></el-button>
        </el-input>-->
        <el-select v-model="message1" clearable filterable
                   @change="search"
                   style="width:100%;"
                   placeholder="卡编号">
          <el-option
            v-for="item in cardNumArr"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </div>
      <!--      搜索 E-->
      <!--      布设 B-->

      <div style='height: .8rem;padding: 0 .2rem;display: flex;align-items: center;justify-content:space-between;'>
        <div>
          <span
            style='font-family: PingFangSC-Semibold;font-size: .16rem;font-weight: 700'>当前布设相机（{{totalNumber}}台）</span>
        </div>
        <div>
          <span class='custombtn' style="display: inline-block" @click="openSet" v-if="abilityList.indexOf('edit')!=-1">手动布设</span>
          &nbsp;
          &nbsp;
          <span class='custombtn' style="display: inline-block" @click="opennewplant" v-if="abilityList.indexOf('edit')!=-1">新计划</span>
        </div>
      </div>
      <!--      布设 E-->
      <!--     列表 B-->
      <table>
        <thead>
        <th>&nbsp;&nbsp;&nbsp;卡编号</th>
        <th>布设时间</th>
        <th>网格编号</th>
        <th>操作</th>
        </thead>
        <tbody>
        <tr v-for='lc in lcList'>
          <td>{{lc.cameraCardId}}</td>
          <td>{{lc.layTime}}</td>
          <td>{{lc.oneKmGridNum}}</td>
          <td>
            <span class='btn2' @click='location(lc)' style="margin-right: .1rem;">定位</span>
            <span class='btn4' @click="openrc(lc)" v-if="abilityList.indexOf('edit')!=-1">手动回收</span>
          </td>
        </tr>
        </tbody>
      </table>
      <!--     列表 E-->
      <!--      分页 B-->
      <div class="page">
        <el-pagination
          @current-change="handleCurrentChange"
          :page-size=pageSize
          layout="prev, pager, next"
          :total=totalNumber>
        </el-pagination>
      </div>
      <!--      分页 E-->
    </div>
    <!--    地图弹窗 E-->
    <!--    当前布设 B-->
    <div class='nowLay'>
      <div style='font-size: 0.16rem;font-weight: 700;' @click="gonsp">
        <span>当前布设计划</span> <img style='margin-left: .1rem;cursor: pointer' src="../../static/images/zjt.png" alt="">
      </div>

      <div style='display: flex;justify-content:space-around;font-size: .14rem'>
        <div>
          <span style='background-color: #dd2c00;' class='s_c'></span>
          <span>已经布设{{totalNumber}}台</span>
        </div>
        <div>
          <span style='background-color: #6200ea;' class='s_c'></span>
          <span>计划回收{{plantLay}}台</span>
        </div>
        <div>
          <span style='background-color: #2962ff;' class='s_c'></span>
          <span>计划布设{{plantSet}}台</span>
        </div>
      </div>

    </div>
    <!--    当前布设 E-->
    <!--    手动回收 B-->
    <div class='recycle' v-show="iSrecycle">
      <div class="cr">
        <div class="tit">
          <span>手动回收</span>
        </div>
        <div>
          <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px"
                   class="demo-ruleForm">

            <el-form-item label="回收时间" prop="date">
              <el-date-picker type="datetime" @change="rdate" placeholder="选择日期" v-model="ruleForm.date"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-row>
              <el-col :span="12">
                <el-form-item label="相机损坏程度" prop="damageDegree">
                  <el-select v-model="ruleForm.damageDegree" placeholder="请选择损坏度">
                    <el-option label="完好" value="完好"></el-option>
                    <el-option label="轻损" value="轻损"></el-option>
                    <el-option label="损坏" value="损坏"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="相机剩余电量" prop="dumpEnergy">
                  <el-select v-model="ruleForm.dumpEnergy" placeholder="请选择剩余电量">
                    <el-option label="较多剩余" value="部分剩余"></el-option>
                    <el-option label="部分剩余" value="较多剩余"></el-option>
                    <el-option label="无剩余" value="无剩余"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="相机剩余内存" prop="freeMemory">
                  <el-select v-model="ruleForm.freeMemory" placeholder="请选择剩余内存">
                    <el-option label="较多剩余" value="较多剩余"></el-option>
                    <el-option label="部分剩余" value="部分剩余"></el-option>
                    <el-option label="无剩余" value="无剩余"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="回收人员" prop="recovUser">
                  <el-select v-model="ruleForm.recovUser" placeholder="请选择回收人员">
                    <el-option v-for="r in getrwArr" :key="r.value" :label="r.label" :value="r.label"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="回收相机" prop="delivery">
                  <el-switch v-model="ruleForm.recycled"></el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item v-if="!ruleForm.recycled" label="卡编号" prop="changeCardId">
                  <el-select v-model="ruleForm.changeCardId" placeholder="请选择活动区域">
                    <el-option v-for="c in caArr" :key="c.label" :label="c.label" :value="c.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item style="text-align: center">
              <el-button @click="resetForm('ruleForm')">取消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')">确认回收</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!--    手动回收 E-->
    <!--手动布设 B-->
    <div class="placement" v-show="iSset">
      <div class="cr">
        <div class="tit">
          <span>布设相机</span>
        </div>
        <div>
          <el-form label-position="left" :model="Setcamera" :rules="Setcamerarules" ref="Setcamera" label-width="120px"
                   class="demo-ruleForm">

            <el-form-item label="布设时间" prop="date">
              <el-date-picker type="datetime" @change="rdate" placeholder="选择日期" v-model="Setcamera.date"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-row>
              <el-col :span="11">
                <el-form-item label="布设人员" prop="worker">
                  <el-select v-model="Setcamera.worker" placeholder="请选择布设人员">
                    <el-option v-for="r in getrwArr" :key="r.value" :label="r.label" :value="r.label"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="11">
                <el-form-item label="卡编号" prop="region">
                  <el-select v-model="Setcamera.region" filterable  placeholder="请选择卡编号">
                    <el-option v-for="c in caArr" :key="c.label" :label="c.label" :value="c.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="经度" prop="lon">
                  <el-input v-model="Setcamera.lon"
                            onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,4})?).*$/g, '$1')"
                            placeholder="例如：116.54"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="11">
                <el-form-item label="纬度" prop="lat">
                  <el-input v-model="Setcamera.lat"
                            onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,4})?).*$/g, '$1')"
                            placeholder="例如：45.32"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="海拔" prop="elevation">
                  <el-input v-model="Setcamera.elevation"
                            onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,4})?).*$/g, '$1')"
                            placeholder="请填写海拔"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="11">
                <el-form-item label="相机型号">
                  <el-input v-model="Setcamera.name" placeholder="请填写相机型号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="坡向">
                  <el-select v-model="Setcamera.slope" placeholder="请选择坡向">
                    <el-option label="东" value="东"></el-option>
                    <el-option label="南" value="南"></el-option>
                    <el-option label="西" value="西"></el-option>
                    <el-option label="北" value="北"></el-option>
                    <el-option label="东南" value="东南"></el-option>
                    <el-option label="东北" value="东北"></el-option>
                    <el-option label="西南" value="西南"></el-option>
                    <el-option label="西北" value="西北"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="11">
                <el-form-item label="生境类型">
                  <el-select v-model="Setcamera.habitat" placeholder="请选择生境类型">
                    <el-option label="落叶阔叶林" value="落叶阔叶林"></el-option>
                    <el-option label="常绿阔叶林" value="常绿阔叶林"></el-option>
                    <el-option label="落叶、常绿阔叶林" value="落叶、常绿阔叶林"></el-option>
                    <el-option label="针叶林" value="针叶林"></el-option>
                    <el-option label="针阔混交林" value="针阔混交林"></el-option>
                    <el-option label="灌丛" value="灌丛"></el-option>
                    <el-option label="草地、草甸" value="草地、草甸"></el-option>
                    <el-option label="农田" value="农田"></el-option>
                    <el-option label="裸岩" value="裸岩"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="森林起源">
                  <el-select v-model="Setcamera.forestoriginates" placeholder="请选择森林起源">
                    <el-option label="原始林" value="原始林"></el-option>
                    <el-option label="次生林" value="次生林"></el-option>
                    <el-option label="人工针叶林" value="人工针叶林"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="11">
                <el-form-item label="乔木郁闭度">
                  <el-input v-model="Setcamera.canopy" placeholder="请填写乔木郁闭度"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="乔木胸径">
                  <el-input v-model="Setcamera.diameter" placeholder="请填写乔木胸径"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="11">
                <el-form-item label="灌木优势">
                  <el-input v-model="Setcamera.advantages" placeholder="请填写灌木优势"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="干扰类型">
                  <el-select v-model="Setcamera.Disturb" placeholder="请选择干扰类型">
                    <el-option label="游客" value="游客"></el-option>
                    <el-option label="建设工程" value="建设工程"></el-option>
                    <el-option label="伐木" value="伐木"></el-option>
                    <el-option label="公路" value="公路"></el-option>
                    <el-option label="放牧" value="放牧"></el-option>
                    <el-option label="盗猎" value="盗猎"></el-option>
                    <el-option label="采矿" value="采矿"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="11">
                <el-form-item label="动物痕迹">
                  <el-input v-model="Setcamera.traces" placeholder="请填写动物痕迹"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="痕迹类型">
                  <el-select v-model="Setcamera.tracestype" placeholder="请选择痕迹类型">
                    <el-option label="粪便" value="粪便"></el-option>
                    <el-option label="脚印" value="脚印"></el-option>
                    <el-option label="取食痕迹" value="取食痕迹"></el-option>
                    <el-option label="挖掘痕迹" value="挖掘痕迹"></el-option>
                    <el-option label="动物身体遗落物（毛发、刺等）" value="动物身体遗落物（毛发、刺等）"></el-option>
                    <el-option label="盗猎" value="盗猎"></el-option>
                    <el-option label="采矿" value="采矿"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="11">
                <el-form-item label="坡度">
                  <el-select v-model="Setcamera.gradient" placeholder="请选择坡度">
                    <el-option label="0°~15°" value="0°~15°"></el-option>
                    <el-option label="16°~30°" value="16°~30°"></el-option>
                    <el-option label="31°~45°" value="31°~45°"></el-option>
                    <el-option label="46°~60°" value="46°~60°"></el-option>
                    <el-option label="61°~90°" value="61°~90°"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="小生境">
                  <el-input v-model="Setcamera.smallhabitat" placeholder="请填写小生境"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="11">
                <el-form-item label="灌木高度">
                  <el-input v-model="Setcamera.shrubheight" placeholder="请填写灌木高度"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="干扰强度">
                  <el-select v-model="Setcamera.disturbintensity" placeholder="请选择干扰强度">
                    <el-option label="强" value="强"></el-option>
                    <el-option label="中" value="中"></el-option>
                    <el-option label="弱" value="弱"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="11">
                <el-form-item label="灌木盖度">
                  <el-input v-model="Setcamera.shrubcoverage" placeholder="请填写灌木盖度"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="干扰频率">
                  <el-select v-model="Setcamera.interferingfrequency" placeholder="请选择干扰频率">
                    <el-option label="经常" value="经常"></el-option>
                    <el-option label="一般" value="一般"></el-option>
                    <el-option label="很少" value="很少"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="11">
                <el-form-item label="乔木高度">
                  <el-input v-model="Setcamera.treeheight" placeholder="请填写乔木高度"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="乔木优势种">
                  <el-input v-model="Setcamera.treeadvantage" placeholder="请填写乔木优势种"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="11">
                <el-form-item label="备注">
                  <el-input v-model="Setcamera.remark"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item style="text-align: center">
              <el-button @click="cancelSet('Setcamera')">取消</el-button>
              <el-button type="primary" @click="SubmitSet('Setcamera')">立即创建</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!--手动布设 E-->

    <!--新计划 B-->
    <div class="pop_up" v-show="iSplan==2">
      <div class="tit">
        <span style="font-size: .22rem;">布设相机</span>
        &nbsp;
        <span style="font-size: .16rem">已选{{allchcar}}个网格,{{sum}}台相机</span>
        <!--<span style="color: #8c939d">shift多选网格/Ctrl框选网格</span>-->
      </div>

      <!--列表-->
      <div class="tableCr">
        <table>
          <thead>
          <!--<th>&nbsp;&nbsp;</th>-->
          <th>网格编号</th>
          <th>上次布设时间</th>
          <th>当前相机数量</th>
          <th>计划布设相机数</th>
          </thead>
          <tbody>
          <tr v-for='gr in allGrids'>
            <!--<td style="text-align: right">-->
            <!--<span class="pinot"-->
            <!--:style="gr.number>0?'background-color:red':' background-color: #1fb456;'">-->

            <!--</span>-->
            <!--</td>-->
            <td>{{gr.gridNumber}}</td>
            <td>{{gr.layTime == null ? '--' : subTime(gr.layTime)}}</td>
            <td>{{gr.realNumber}}</td>
            <td class="camera_num">
                  <span @click="minus(gr)">
                   -
                  </span>
              <span>
                     {{gr.number}}
                    </span>
              <span @click="add(gr)">
                      +
                    </span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <!--列表-->

      <!--取消 B-->
      <div class="nextStep">
        <span
          @click="cancelnewplant"
          class="s_btn" style="background-color: #f9f9fa;color:#b4b4b5;border: 1px solid #e4e7ed;">取消</span>
        &nbsp;
        &nbsp;
        &nbsp;
        <span
          @click="rpsc"
          class="s_btn">下一步</span>
      </div>
      <!--取消 E-->
    </div>
    <!--新计划 E-->


    <!--回收相机 B-->
    <div class="pop_up" v-show="iSplan==3">
      <div class="tit">
        <span style="font-size: .22rem;">回收相机</span>
        &nbsp;
        &nbsp;
        <el-checkbox @change="plrc" v-model="checked">勾选上次计划未完成回收的相机</el-checkbox>
      </div>

      <!--列表-->
      <div class="tableCr">
        <table>
          <thead>
          <!--<th>&nbsp;&nbsp;</th>-->
          <th>回收({{checkIdArr.length}})</th>
          <th>卡编号</th>
          <th>布设时间</th>
          <th>已放置时间</th>
          </thead>
          <tbody>
          <tr v-for='gr in rpsArr'>
            <!--<td> <input type="checkbox" :checked="checkIdArr.indexOf(city.id) != -1" @change=""></td>-->
            <td><input type="checkbox" :checked="checkIdArr.indexOf(gr.id) != -1" @change="checkid(gr.id)"></td>
            <td>{{gr.cameraCardId}}</td>
            <td>{{gr.layTime}}</td>
            <td>{{gr.recovTip}}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <!--列表-->

      <!--取消 B-->
      <div class="nextStep">
        <span
          @click="goback2"
          class="s_btn" style="background-color: #f9f9fa;color:#b4b4b5;border: 1px solid #e4e7ed;">上一步</span>
        &nbsp;
        &nbsp;
        &nbsp;
        <span
          @click="ovgerp"
          class="s_btn">完成</span>
      </div>
      <!--取消 E-->
    </div>
    <!--回收相机 E-->

    <!--slideshow-->
    <slideshow ref="sli"></slideshow>
    <!--slideshow-->
  </div>
</template>
<script>
  import api from '../utils/api'
  import http from '../utils/http'
  import Bmap from './Map'
  export default {
    components: {
      'Bmap': Bmap
    },
    data() {
      return {
        message1: "",
        areaId: "",
        pageNum: 0,
        pageSize: 7,
        totalNumber: 0,
        lcList: [],
        plantLay: 0,
        plantSet: 0,
        allGrids: [],
        cardNumArr: [],
        abilityList:'',
        iSrecycle: false,
        t1: "",
        ruleForm: {
          areaId: "",
          cameraCardId: "",
          cameraEnvirId: "",
          recoveryDate: "",
          recovUser: "",
          changeCardId: "",
          date: "",
          damageDegree: "",
          dumpEnergy: "",
          freeMemory: "",
          recycled: true,
        },
        rules: {
          region: [
            {required: true, message: '请选择活动区域', trigger: 'change'}
          ],
          damageDegree: [
            {required: true, message: '请选择损坏度', trigger: 'change'}
          ],
          dumpEnergy: [
            {required: true, message: '请选择剩余电量', trigger: 'change'}
          ],
          freeMemory: [
            {required: true, message: '请选择剩余内存', trigger: 'change'}
          ],
          changeCardId: [
            {required: true, message: '请选择卡编号', trigger: 'change'}
          ],
          recovUser: [
            {required: true, message: '请选择回收人员', trigger: 'change'}
          ],
          date: [
            {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
          ]
        },
        getrwArr: [{label: "", value: ""}],
        caArr: [{label: "", value: ""}],
        Setcamera: {
          areaId: "",
          date1: "",
          date: '',
          region: "",
          worker: "",
          elevation: "",
          lon: "",
          lat: "",
          name: "",
          slope: "",//坡向
          habitat: "",//生境
          forestoriginates: "",//森林起源
          canopy: "",//郁闭度
          diameter: "",//胸径
          advantages: "",//优势
          Disturb: "",//干扰类型
          traces: "",//动物痕迹
          tracestype: "",//痕迹类型
          gradient: "",//坡度
          smallhabitat: "",//小生境
          shrubheight: "",//灌木高度
          disturbintensity: "",//干扰强度
          shrubcoverage: "",//灌木盖度
          interferingfrequency: "",//干扰频率
          treeheight: "",//乔木高度
          treeadvantage: "",//乔木优势
          remark: "",//备注
        },
        Setcamerarules: {
          date: [
            {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
          ],
          region: [
            {required: true, message: '请选择卡编号', trigger: 'change'}
          ],
          worker: [
            {required: true, message: '请选择布设人员', trigger: 'change'}
          ],
          elevation: [
            {required: true, message: '请输入海拔', trigger: 'blur'},
          ],
          lon: [
            {required: true, message: '请输入经度', trigger: 'blur'},
          ],
          lat: [
            {required: true, message: '请输入纬度', trigger: 'blur'},
          ]
        },
        iSset: false,
        iSplan: 1,
        checked: false,
        rpsArr: [],
        checkIdArr: [],
        lastArr: [],
        layStr: "",
        sum: 0,
        allchcar: 0
      }
    },
    created() {
      //获取areaid
      this.abilityList=sessionStorage.getItem('abilityList')
      this.areaId = sessionStorage.getItem('areaId');
      this.getrw();
      this.getcn();
      this.getcameranumber();
    },
    mounted() {
      this.$refs.baseMap.creationMap();
      this.getlaycamera();
    },
    methods: {
      gorl(){
        this.$router.push('/rlc')
      },
      accept(data){
        if (data.name == '图集') {
          this.$refs.sli.acceptData(data.data);
        }
      },
      getcn() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.getCameraNumber, {
            areaId: vm.areaId,
            status: "all"
          })
          vm.cardNumArr = res.data;
        })()
      },
      //获取布设相机
      getlaycamera() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.laycamera, {
            areaId: vm.areaId,
            pageSize: vm.pageSize,
            pageNum: vm.pageNum,
            keyWord: vm.message1,
          })
          vm.lcList = res.data.content;
          vm.totalNumber = res.data.totalElements;

//          获取总数量

          (async function () {
            let allres = await http.get(api.infrared.laycamera, {
              areaId: vm.areaId,
              pageSize: res.data.totalElements,
              pageNum: 0,
              keyWord: vm.message1,
            })

            var arr = [];
            allres.data.content.forEach(t => {
              var z = {
                id: t.id,
                name: "",
                borderColor: "#ffffff",
                fillColor: "#dd2c00",
                data: {
                  mtl: [],
                  id: t.id,
                  size: 1,
                  isdetails: true,
                  isdetailsTetx: "查看详情",
                  opennew: true,
                  isdetailsLink: {path: '/rlc/cameraDistribution/cddetails', data: t},
                  mediaList: vm.incisionStr(t.urlStr)
                },
                geojson: {coordinates: [t.eastLongitude, t.northernLatitude], type: "Point"}
              }
              arr.push(z)
            })
            if (arr.length != 0) {
              vm.$refs.baseMap.previewshape(arr, "alread_Point");
            }
            vm.getGrids();
          })()
        })()
      },
      //分页
      handleCurrentChange(val) {
        this.pageNum = `${val}` - 1;
        this.getlaycamera();
      },
      //搜索
      search(){
        this.getlaycamera();
      },
      //定位
      location(t) {
        var data = {
          mtl: [],
          id: t.id,
          size: 1,
          isdetails: true,
          isdetailsTetx: "查看详情",
          opennew: true,
          isdetailsLink: {path: '/rlc/cameraDistribution/cddetails', data: t},
          mediaList: this.incisionStr(t.urlStr)
        }, lonlat = [t.eastLongitude, t.northernLatitude];
        this.$refs.baseMap.artificialLocation(data, lonlat);
      },
      //打开手动回收
      openrc(t){
        this.iSrecycle = true;
        this.ruleForm["areaId"] = this.areaId;
        this.ruleForm["cameraCardId"] = t.cameraCardId;
        this.ruleForm["cameraEnvirId"] = t.id;
      },
      //手动回收
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.ruleForm.recoveryDate = this.t1;
            var vm = this;
            (async function () {
              let res = await http.post(api.infrared.recoveryCamera, vm.ruleForm)
              if (res.data.status == "error") {
                vm.error(res.data.message);
                vm.$refs.ruleForm.resetFields();
              }
              if (res.data.status == "success") {
                vm.success("回收成功")
                vm.$refs.ruleForm.resetFields();
                vm.getlaycamera();
                vm.iSrecycle = false;
              }
            })()
          } else {
//            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.iSrecycle = false;
        this.$refs[formName].resetFields();
      },
      //打开布设
      openSet(){
        this.iSset = true;
        this.Setcamera.areaId = this.areaId;
      },
      //取消布设
      cancelSet(formName){
        this.$refs[formName].resetFields();
        this.iSset = false;
      },
      //确认布设
      SubmitSet(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var vm = this;
            (async function () {
              let res = await http.get(api.infrared.isLaying, {
                areaId: vm.areaId,
                number: vm.Setcamera.region
              })

              if (res.data.status == "error") {
                vm.error(res.data.message);
              }
              if (res.data.status == "success") {
                vm.Setcamera.date1 = vm.t1;
                (async function () {
                  let res = await http.post(api.infrared.addCameraEnvir, vm.Setcamera)

                  if (res.data.status == "error") {
                    vm.error(res.data.message);
                  }
                  if (res.data.status == "success") {
                    vm.success('布设成功');
                    vm.$refs.Setcamera.resetFields();
                    vm.getlaycamera();
                    vm.iSset = false;
                  }
                })()
              }

            })()
          } else {
            return false;
          }
        })
      },

      //新计划 加减相机
      //打开新计划
      opennewplant(){
        this.iSplan = 2;
        this.$refs.baseMap.dellayer('plantSet');
      },
      //取消新计划
      cancelnewplant(){
        this.allchcar = 0;
        this.sum = 0;
        this.iSplan = 1;
        this.allGrids.forEach(e => {
          e.number = 0;
          this.$refs.baseMap.dellayer(e.id);
        })
        this.getGrids();
      },
      //下一步回收相机
      rpsc(){
        var arr = []
        this.allGrids.forEach(e => {
          if (e.number > 0) {
            var z = e.gridNumber + "_" + e.number;
            arr.push(z);
          }
        })

        this.layStr = arr.join("#");

        this.iSplan = 3;
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.layCameralList, {
            areaId: vm.areaId
          })
          vm.rpsArr = res.data;
        })()
      },
      //勾选未完成回收的相机
      plrc(){
        if (this.checked) {
          this.checkIdArr = this.checkIdArr.concat(this.lastArr);
        } else {
          this.lastArr.forEach(e => {
            if (this.checkIdArr.indexOf(e) != -1) {
              var index = this.checkIdArr.indexOf(e);
              this.checkIdArr.splice(index, 1);
            }
          })
        }
      },
      checkid(t){
        if (this.checkIdArr.indexOf(t) != -1) {
          var index = this.checkIdArr.indexOf(t);
          this.checkIdArr.splice(index, 1);
        } else {
          this.checkIdArr.push(t)
        }
      },
      //返回计划布设
      goback2(){
        this.iSplan = 2;
        this.checked = false;
        this.checkIdArr = [];
      },
      //计划完成
      ovgerp(){
        var str = this.checkIdArr.join("#");
        if (this.layStr == '' && str == '') {
          this.warn('请部署完善的计划')
        } else {
          var vm = this;
          (async function () {
            let res = await http.post(api.infrared.add, {
              layStr: vm.layStr,
              recovStr: str,
              areaId: vm.areaId,
              gridLevel: "1KM"
            })
            if (res.data.code == '200') {
              vm.allGrids.forEach(e => {
                e.number = 0;
                vm.$refs.baseMap.dellayer(e.id);
              })
              vm.checked = false;
              vm.checkIdArr = [];
              vm.allchcar = 0;
              vm.sum = 0;
              vm.iSplan = 1;
              vm.success("发布计划完成");
              vm.getlaycamera();
            } else {
              vm.error('网络异常！')
            }

          })()
        }
      },
      //加
      add(ls) {
        ls.number++;
        var arr = [{
          id: ls.gridNumber,
          name: ls.gridNumber + '计划' + ls.number,
          textColor: "#a78839",
          borderColor: "#ffffff",
          fillColor: "rgba(255,255,255,0.7)",
          data: {},
          geojson: ls.geojson
        }];
        this.$refs.baseMap.previewshape(arr, ls.id);
        this.numadd();
      },
      //减
      minus(ls) {
        if (ls.number > 0) {
          ls.number--;
          var arr = [{
            id: ls.gridNumber,
            name: ls.gridNumber + '计划' + ls.number,
            textColor: "#a78839",
            borderColor: "#ffffff",
            fillColor: "rgba(255,255,255,0.7)",
            data: {},
            geojson: ls.geojson
          }];
          this.$refs.baseMap.previewshape(arr, ls.id);
          this.numadd();
        }

      },

      numadd(){
        var arr = [], sum = 0;
        for (var i = 0; i < this.allGrids.length; i++) {
          if (this.allGrids[i].number > 0) {
            arr.push(this.allGrids[i].number)
          }
        }
        for (var k = 0; k < arr.length; k++) {
          sum += arr[k];
        }

        this.sum = sum;
        this.allchcar = arr.length;
      },

      //获取回收人员
      getrw(){
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.getCameraWorker, {
            areaId: vm.areaId
          })
          let arr = [];
          res.data.forEach(d => {
            let z = {
              label: d[1],
              value: d[0]
            }
            arr.push(z)
          })
          vm.getrwArr = arr;
        })()
      },
      //获取卡编号
      getcameranumber(){
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.cameraEnvir, {
            areaId: vm.areaId
          })
          let arr = [];
          res.data.forEach(d => {
            let z = {
              label: d,
              value: d
            }
            arr.push(z)
          })
          vm.caArr = arr;
        })()
      },
      //回收时间
      rdate(datetime){
        if (datetime != "") {
          var year = datetime.getFullYear();
          var month = datetime.getMonth() + 1;
          var date = datetime.getDate();
          var Hours = datetime.getHours();
          var Minutes = datetime.getMinutes();
          var Seconds = datetime.getSeconds();
          if (month >= 1 && month <= 9) {
            month = "0" + month;
          }
          if (date >= 0 && date <= 9) {
            date = "0" + date;
          }
          if (Hours >= 1 && Hours <= 9) {
            Hours = "0" + Hours;
          }
          if (Minutes >= 0 && Minutes <= 9) {
            Minutes = "0" + Minutes;
          }
          if (Seconds >= 1 && Seconds <= 9) {
            Seconds = "0" + Seconds;
          }
          var t1 = year + "-" + month + "-" + date + " " + Hours + ":" + Minutes + ":" + Seconds;
          this.t1 = t1;
        } else {
          this.t1 = ""
        }
      },
      //获取网格
      getGrids() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.grids, {
            areaId: vm.areaId,
            level: "1KM"
          })
          var grids = [];
          res.data.forEach(t => {
            vm.$set(t, 'number', 0);
            var z = {
              id: t.gridNumber,
              name: t.gridNumber,
              textColor: "#a78839",
              borderColor: "#ffffff",
              fillColor: "rgba(0,0,0,0.1)",
              data: {},
              geojson: t.geojson
            }
            grids.push(z);
          })
          vm.allGrids = res.data;
          if (grids.length != 0) {
            vm.$refs.baseMap.previewshape(grids, "grids");
          }
          vm.getplan(res.data);
        })()
      },
//      opendrag(){
//        this.$refs.baseMap.BoxSelection(true, "grids");
//      },
      //计划布设
      getplan(data) {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.findOne, {
            areaId: vm.areaId
          })
          vm.plantLay = res.data.planRecovNumber;
          vm.plantSet = res.data.planLayNumber;
          if (res.data.planLayDetail != null) {
            var d = res.data.planLayDetail, arr = [];
            for (var k in d) {
              data.forEach(t => {
                if (k == t.gridNumber) {
                  var z = {
                    id: t.gridNumber,
                    name: t.gridNumber + '计划' + d[k],
                    textColor: "#a78839",
                    borderColor: "#ffffff",
                    fillColor: "rgba(41,98,255,0.7)",
                    data: {},
                    geojson: t.geojson
                  }
                  arr.push(z);
                }
              })
            }
            if (arr.length != 0) {
              vm.$refs.baseMap.previewshape(arr, "plantSet");
            }
          }
          if (res.data.planRecovDetail != null && res.data.planRecovDetail.length > 0) {
            vm.lastArr = res.data.planRecovDetail.concat([]);
            vm.$refs.baseMap.changePointStyle('alread_Point', res.data.planRecovDetail, '#6200ea')
          }
        })()
      },
      //切割字符串
      incisionStr(e) {
        if (e != '' && e != null) {
          return e.split("#");
        } else {
          return []
        }
      },
      //时间转换格式
      timeTransition(t) {
        if (t != '') {
          return this.$moment(t).format('YYYY-MM-DD');
        } else {
          return t
        }
      },
      //截取时间
      subTime(t){
        if (t != null) {
          return t.substring(0, t.length - 3)
        }
      },
      gonsp(){
        this.$router.push('/cameraDistribution/nowadaysSetPlan')
      },
      //成功
      success(t) {
        this.$message({
          message: t,
          type: 'success'
        });
      },
      //失败
      error(t) {
        this.$message.error(t);
      },
      //警告
      warn(t) {
        this.$message({
          message: t,
          type: 'warning'
        });
      },
    }
  }
</script>
<style scoped>
  @import "../../static/css/cameraDistribution.css";
</style>
<style>
  .page .el-pagination button, .el-pagination span:not([class*=suffix]) {
    display: inline-block;
    min-width: 0.355rem;
    height: 0.28rem;
    line-height: 0.28rem;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: PingFangSC-Regular;
    font-size: 0.14rem;
    color: #565758;
    letter-spacing: 0;
  }

  .page .el-pagination .btn-next .el-icon, .el-pagination .btn-prev .el-icon {
    display: block;
    font-size: 0.12rem;
    font-weight: 700;
    width: 0.3rem;
    height: 0.3rem;
    background-color: #F4F4F5;
    /*background-color: red;*/
    border-radius: 50%;
    line-height: 0.3rem;
    text-align: center;
  }

  .page .el-pager li {
    padding: 0 !important;
    /*font-size: 13px;*/
    width: 0.3rem;
    height: 0.3rem;
    margin-right: 0.1rem;
    min-width: 0;
    background-color: #F4F4F5;
    border-radius: 50%;
    line-height: 0.3rem;
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 0.14rem;
    color: #C0C4CC;
    letter-spacing: 0;
    text-align: center;
  }

  .page .el-pager li.active {
    width: 0.3rem;
    height: 0.3rem;
    padding: 0 !important;
    background-color: #00CC46;;
    color: #fff;
    border-radius: 50% !important;
  }

  .page .el-pager li:hover {
    color: #00CC46;
  }

  .page .el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 0.04rem;
    border: 0.01rem solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 0.24rem;
    line-height: 0.24rem;
    outline: 0;
    padding: 0 0.15rem;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 0.4rem !important;
  }
</style>
